﻿@model TestDropdownList.Models.Person
           

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>



@using (Html.BeginForm())
{    
    
    if (Model.PersonId != 0)
    {
        <text>Editing: </text> @Model.PersonName
    }
    
    <table>

    <tr>
    <td>@Html.LabelFor(x => x.CountryCode)</td>
    <td style="width: 100px">@Html.DropDownListFor(x => x.CountryCode, new List<SelectListItem>(), new { TheOriginalValue = Model.CountryCode })</td>
    </tr>
    
    
    <tr>
    <td>@Html.LabelFor(x => x.CityCode)</td>
    <td style="width: 100px">@Html.DropDownListFor(x => x.CityCode, new List<SelectListItem>(), new { TheOriginalValue = Model.CityCode })</td>
    </tr>      
    
    </table>
}
    


<script type="text/javascript">
    $(function () {


        var countryCodeInitialValue = $('#CountryCode').attr('TheOriginalValue');
        PopulateCountry(countryCodeInitialValue, function () {
            var cityCodeInitialValue = $('#CityCode').attr('TheOriginalValue');
            $('#CityCode').val(cityCodeInitialValue);            
        });





        $('#CountryCode').change(function () {
            // alert($(this).val() + ": " + $('option:selected', $(this)).text());


            // Why use this?
            // alert($('option:selected', '#CountryCode').val());

            // Or this?
            // alert($('option:selected', $(this)).val());


            // When this will suffice?
            PopulateFromCountry($(this).val());
        });


        /////////////////


        function PopulateCountry(countryCode, doneCallback) {
            $.ajax({ url: '/Home/CountryList/',
                type: 'POST',

                dataType: 'json',
                success: function (data) {

                    var options = $('#CountryCode');
                    $.each(data, function () {
                        options.append($('<option />').val(this.CountryCode).text(this.CountryName));
                    });



                    if (countryCode != "") {
                        $(options).val(countryCode);
                    }
                    else {
                        countryCode = $(options).val();
                    }

                    PopulateFromCountry(countryCode, doneCallback);

                } // ajax callback

            }); // ajax call

        } // PopulateCountry()


        function PopulateFromCountry(countryCode, doneCallback) {

            $.ajax({ url: '/Home/CityList/',
                type: 'POST',
                data: { CountryCode: countryCode }, // parameter on CityList method

                dataType: 'json',
                success: function (data) {

                    var options = $('#CityCode');
                    $('option', options).remove(); // will remove all cities

                    // repopulate all cities
                    $.each(data, function () {
                        options.append($('<option />').val(this.CityCode).text(this.CityName));
                    });


                    if (doneCallback != undefined)
                        doneCallback();


                } // ajax callback

            }); // ajax call

        } // PopulateFromCountry()

    }); //jquery ready

</script>

